<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8">
<title>Change Attribute class</title>

<script>
function cGRp(){
document.getElementById("code").setAttribute("Class","pth");
}
function cGRh(){
document.getElementById("code").setAttribute("Class","htm");
}
function cGRk(){
document.getElementById("code").setAttribute("Class","klb");
}
</script>

<style>
.klb{background:red;color:#eee;}
.htm{background:green;color:#4ac;}
.pth{background:blue;color:#000;}
.gr_button{DISPLAY:INLINE-BLOCK;PADDING:3PX 5PX;BACKGROUND:#AAA;MARGIN-RIGHT:6PX;TEXT-DECORATION:NONE;CURSOR:POINTER;FONT-WEIGHT:BOLD;COLOR:#000;BORDER:1PX SOLID #333;}
</style>

<style type="text/css">
.classname {
 color: red;
 font-size: 14px;
text-align:center;
}
</style>

</head>
<body>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("button").onclick = function() {
        var ss = document.styleSheets;

        for (var i=0; i<ss.length; i++) {
            var rules = ss[i].cssRules || ss[i].rules;

            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === ".classname") {
                    rules[j].style.color = "green";
                    rules[j].style.backgroundColor = "red";
                    rules[j].style.width = "800px";
                    rules[j].style.fontSize = "60px";
                }
            }
        }
    };
    document.getElementById("but").onclick = function() {
        var ss = document.styleSheets;

        for (var i=0; i<ss.length; i++) {
            var rules = ss[i].cssRules || ss[i].rules;

            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === ".classname") {
                    rules[j].style.color = "yellow";
                    rules[j].style.backgroundColor = "black";
                    rules[j].style.width = "500px";
                    rules[j].style.fontSize = "50px";
                }
            }
        }
    };
}
</script>


<h1 class="classname">Some red text</h1>

<button id="button">Make text green</button>
<button id="but">Make text green</button>

<div id="code" class="klb" style="width:800px;height:100px;margin:10px auto;"></div>

<a class="gr_button" href="javascript:cGRp()">BLUE</a><a class="gr_button" href="javascript:cGRh()">GREEN</a><a class="gr_button" href="javascript:cGRk()">Default &raquo; RED</a>



</body>
</html>